<template>
  <div class="list">
    <div class="list_content">
      <div>
        <template>
          <el-tabs v-model="activeName" type="card"  @tab-click="handleClick">
            <el-tab-pane label="招牌菜" name="招牌" ><div class="list_item" v-for="item in dishList" @click="on_item(item)" v-if="dishVisible == false">
              <div style="width: 100%;height: 170px;">
                <img :src="item.dish_img" style="width: 100%;height: 170px">
              </div>
              <div
                  style="height: 30px;background-color: #fd5e21;padding:0 10px;display: flex;justify-content: space-between;">
                <span>{{ item.dish_name }}</span>
                <span>￥{{ item.dish_price }}</span>
              </div>
            </div></el-tab-pane>
            <el-tab-pane label="热炒系列" name="热炒"><div class="list_item" v-for="item in dishList" @click="on_item(item)" v-if="dishVisible == false">
              <div style="width: 100%;height: 170px;">
                <img :src="item.dish_img" style="width: 100%;height: 170px">
              </div>
              <div
                  style="height: 30px;background-color: #fd5e21;padding:0 10px;display: flex;justify-content: space-between;">
                <span>{{ item.dish_name }}</span>
                <span>￥{{ item.dish_price }}</span>
              </div>
            </div></el-tab-pane>
            <el-tab-pane label="凉拌系列" name="凉拌"><div class="list_item" v-for="item in dishList" @click="on_item(item)" v-if="dishVisible == false">
              <div style="width: 100%;height: 170px;">
                <img :src="item.dish_img" style="width: 100%;height: 170px">
              </div>
              <div
                  style="height: 30px;background-color: #fd5e21;padding:0 10px;display: flex;justify-content: space-between;">
                <span>{{ item.dish_name }}</span>
                <span>￥{{ item.dish_price }}</span>
              </div>
            </div></el-tab-pane>
            <el-tab-pane label="炖汤系列" name="炖汤"><div class="list_item" v-for="item in dishList" @click="on_item(item)" v-if="dishVisible == false">
              <div style="width: 100%;height: 170px;">
                <img :src="item.dish_img" style="width: 100%;height: 170px">
              </div>
              <div
                  style="height: 30px;background-color: #fd5e21;padding:0 10px;display: flex;justify-content: space-between;">
                <span>{{ item.dish_name }}</span>
                <span>￥{{ item.dish_price }}</span>
              </div>
            </div></el-tab-pane>
            <el-tab-pane label="小吃系列" name="小吃"><div class="list_item" v-for="item in dishList" @click="on_item(item)" v-if="dishVisible == false">
              <div style="width: 100%;height: 170px;">
                <img :src="item.dish_img" style="width: 100%;height: 170px">
              </div>
              <div
                  style="height: 30px;background-color: #fd5e21;padding:0 10px;display: flex;justify-content: space-between;">
                <span>{{ item.dish_name }}</span>
                <span>￥{{ item.dish_price }}</span>
              </div>
            </div></el-tab-pane>
            <el-tab-pane label="酒水系列" name="酒水"><div class="list_item" v-for="item in dishList" @click="on_item(item)" v-if="dishVisible == false">
              <div style="width: 100%;height: 170px;">
                <img :src="item.dish_img" style="width: 100%;height: 170px">
              </div>
              <div
                  style="height: 30px;background-color: #fd5e21;padding:0 10px;display: flex;justify-content: space-between;">
                <span>{{ item.dish_name }}</span>
                <span>￥{{ item.dish_price }}</span>
              </div>
            </div></el-tab-pane>
            <el-tab-pane label="主食系列" name="主食"><div class="list_item" v-for="item in dishList" @click="on_item(item)" v-if="dishVisible == false">
              <div style="width: 100%;height: 170px;">
                <img :src="item.dish_img" style="width: 100%;height: 170px">
              </div>
              <div
                  style="height: 30px;background-color: #fd5e21;padding:0 10px;display: flex;justify-content: space-between;">
                <span>{{ item.dish_name }}</span>
                <span>￥{{ item.dish_price }}</span>
              </div>
            </div></el-tab-pane>
          </el-tabs>
        </template>
        <div class="list_item" @click="on_item(item)" v-if="dishVisible == true">
          <div style="width: 100%;height: 170px;">
            <img :src="dish.dish_img" style="width: 100%;height: 170px">
          </div>
          <div
              style="height: 30px;background-color: #fd5e21;padding:0 10px;display: flex;justify-content: space-between;">
            <span>{{ dish.dish_name }}</span>
            <span>￥{{ dish.dish_price }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
  data() {
    return {
      value: '',
      currentPage: 1,
      activeName: '招牌',
      dishNum: 1,
      dishName: localStorage.getItem('dishName'),
      pageSize: 10,
      total: 0,
      dishList: [],
      loginInfo: '',
      dish:[],
      dishVisible: false
    }
  },
  methods: {
    on_item(item) {//加入购物车
      console.log('发送数据')
      let url = BaseUrl.FRONT_CART + '/carts/add/' + item.id + '/' + this.dishNum;
      console.log('url:' + url)

      TokenAxios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          location.reload();
        } else {
          this.$message.error(jsonResult.message);
        }
      });
    },
    handleClick(tab) {//点击菜品分类
      localStorage.removeItem('dishName');
      this.dishVisible = false;
      this.loadDishList();
    },
    loadSearchDish(){
      if (this.dishName != null){
        let url = BaseUrl.DISHES + '/dishes/byName?dish_name='+this.dishName;
        console.log('url:' + url)

        TokenAxios.get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            if (jsonResult.data != null){
              console.log(jsonResult.data.id);
              this.dish = response.data.data;
              this.dishVisible = true;
            }else {
              this.dish = [];
              this.$message({
                type: 'warning',
                duration: 1800,
                message: '你搜索的菜品【' + this.dishName + '】不存在,请重新输入'
              });
            }
          } else {
            this.$message.error(jsonResult.message);
          }
        });
      }
    },
    loadDishList() {//加载菜单列表
      let url = BaseUrl.DISHES + '/dishes/byCategory?dish_category=' + this.activeName;
      console.log('url:' + url)

      this.axios.get(url).then((response) => {
        this.dishList = response.data.data;
        this.$forceUpdate();
      });
    },
  },
  mounted() {
    this.loadSearchDish();
    this.loadDishList();
  }
}
</script>

<style scoped lang="less">
.list {
  height: 100%;
  overflow: hidden;
}
/deep/ .el-tabs {
  .el-tabs__item {
    width: 150px !important;
  }
  .el-tabs__top{
    height: 60px !important;
  }
}

.list_header {
  display: flex;
  justify-content: left;
  margin-top: 10px;

  & > div {
    padding: 7px 30px;
    border: 1px solid rgba(196, 196, 196, 1);
    border-radius: 5px;
    margin-right: 10px;
    font-size: 12px;
    cursor: pointer;
  }

  .list_select {
    color: #fff;
    background: #fd5e21;
  }
}

.list_content {
  display: flex;
  justify-content: left;
  flex-flow: wrap;
  margin-top: 10px;
  height: calc(100vh - 152px);
  overflow: auto;

  .list_item {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
    font-size: 14px;
    overflow: hidden;
    line-height: 30px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
  }

}

.list::-webkit-scrollbar {
  width: 6px;
}

.list::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(196, 196, 196, 1);
}

.list::-webkit-scrollbar-track {
  border-radius: 8px;
  background-color: #e7e7e7;
  border: 1px solid #cacaca;
}
</style>